<template>
<!--  菜单管理页面最大的盒子-->
  <div class="menu-all">
    <!--    头部最大盒子-->
    <el-row class="search">
      <div style="display: flex;line-height: 60px;">
        <!--        头部图片最大的盒子-->
        <div class="icons">
          <!--          权限图片-->
          <i class="iconfont icon-quanxian"></i>
        </div>
        <!--        头部标题-->
        <span class="icone">菜单管理</span>
      </div>
    </el-row>
<!--    菜单页面上方最大盒子-->
    <!--    页面下方最大盒子-->
    <div class="bottom-all">
      <!--      下方上方按钮-->
      <div class="button-all">
        <!--            下方按钮大盒子-->
        <el-row class="iconfont-all">
          <!--              按钮小盒子-->
          <el-button class="iconfont-one1" type="primary" @click="insertMenu"><i class="iconfont icon-xinzeng"></i>新增</el-button>
          </el-row>
      </div>
      <!--      下方大表格-->
      <div>
        <el-table
            :data="d.tableData"
            style="width: 100%"
            row-key="id"
            :tree-props="{children: 'menuList',hasChildren: 'hasChildren'}"
            :header-cell-style="{
                               fontWeight:'normal',
                               fontSize:'14px',
                               color:'#909399',
                                background:'#EFF3F8',
                            }"
        >

          <el-table-column label="菜单名称" prop="menuName" width="120" />
          <el-table-column label="父菜单id" prop="fatherId" width="120" />
          <el-table-column label="请求地址" prop="path" width="160" />

          <el-table-column label="可见" prop="visible" width="120" >
            <!--            表格里面的---显示按钮-->

            <template #default="scope">
              <el-switch v-model="scope.row.visible"
                         @click="updateVisible(scope.row)"
                         active-value="0"
                         inactive-value="1">
              </el-switch>

            </template>
          </el-table-column>
          <el-table-column label="权限标识" prop="perms" width="260"/>
          <el-table-column label="操作" prop="name6" >
            <template #default="scope">

            <div class="butt-all" style="display: flex">
                <!--                      右下方表格里面的按钮-->
                  <el-button class="table-buttom" type="primary" @click="updateMenu(scope.row.id)"><i class="iconfont icon-tianxie"></i>编辑</el-button>
                  <el-button class="table-buttom" type="danger" @click="deleteState(scope.row)"><i class="iconfont icon-shanchusekuai"></i>删除</el-button>
              </div>
            </template>


          </el-table-column>
        </el-table>
        <el-row justify="center">
          <el-col>
            <el-pagination
                v-model:currentPage="d.pageNo"
                v-model:page-size="d.pageSize"
                :page-sizes="[5,10, 20, 30, 40]"
                small="small"
                layout="total, sizes, prev, pager, next, jumper"
                :total="d.total"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"/>
          </el-col>
        </el-row>
      </div>

    </div>
  </div>

<MenuSecuritySaven :MenuData="menuData" ref="childRef"></MenuSecuritySaven>
</template>


<script lang="ts" setup>
// 上方搜索、重置按钮
import {
  Check,
  Delete,
  Edit,
  Message,
  Star,
} from '@element-plus/icons-vue'
import {onMounted, reactive, ref} from "vue";
import axios from "axios";
import MenuSecuritySaven from "./systemVue/MenuSecuritySaven.vue";
import {ElMessage} from "element-plus";
import {useRouter} from "vue-router";
const router=useRouter()
const d = reactive({
  //总记录
  total:0,
  //页码
  pageNo:1,
  //页大小
  pageSize:5,
  //数据
  tableData: [],
});
const ALltableData=ref([])
const getTabelData=()=>{//分页，这里没必要管一样就行
  let data =JSON.parse(JSON.stringify(ALltableData.value));//把数据转为JSON格式
  let shu = data.splice(
      (d.pageNo - 1) * d.pageSize,
      d.pageSize
  )
  d.tableData = shu ;
}

const deleteState =(data)=>{
  console.log(data)
  const id = data.id;
  const delFlag= data.delFlag==0?1:0;
  const sysmenu ={id:id
    ,delFlag}
  console.log(sysmenu)
  const url ="http://localhost:1688/login/updatemenu";
  axios.put(url,sysmenu).then(data=>{
    const val =data.data;
    console.log(val)
    if(val.code==403){
      ElMessage.error("权限不足")
    }else {
      console.log(data)
      router.go()

    }
  })
}
const handleSizeChange = (val: number) => {//分页，这里没必要管一样就行
  d.pageSize = val ;
  d.pageNo = 1;
  getTabelData();
}

const handleCurrentChange = (val: number) => {//分页，这里没必要管一样就行
  d.pageNo = val;
  getTabelData();
}
onMounted(()=>{
  // #shujuyuan
  axios.get("http://localhost:1688/login/allMenu").then((data)=>{
    var data2=data.data.data
    ALltableData.value = data2;//放入表格
    d.total = data.data.data.length;//获得它的长度
    getTabelData();//调用方法
  })
})
const updateVisible= (data)=>{

  const id = data.id;
  var visible=0;
  console.log(data.visible==0?1:0)
  if(data.visible==0){
    visible=0
  }else{
    visible=1;

  }
  const sysmenu ={id:id
  ,visible:visible}
  const url ="http://localhost:1688/login/updatemenu";
  fun12(url,sysmenu)
}
const fun12= async  function(url,sysmenu){
  await axios.put(url,sysmenu).then(data=>{
    const val =data.data;
    console.log(val)
    if(val.code==403){
      ElMessage.error("权限不足")
    }else {
      console.log(data)
      router.go()
    }
  })
}
const menuData =reactive({
  transition:0, //默认新增  1 修改
  dialogVisible:false,
  menu:{},
})
// 下方表格
const parentBorder = ref(false)
const childBorder = ref(false)
const childRef =ref();
// 表格里面的显示开关
const value4 = ref(true)

// 表格里面的开关
const value2 = ref(true)
const insertMenu = ()=>{
  menuData.transition= 0;
   menuData.dialogVisible= true;
  childRef.value.defaultMenu(null)
}
const  updateMenu =(id)=>{
  menuData.transition= 1
  menuData.dialogVisible= true;
  const url = `http://localhost:1688/login/menuId/${id}`
  axios.get(url).then((data)=>{
    menuData.menu =data.data.data;
    console.log(data.data.data)
    childRef.value.defaultMenu(data.data.data)
  })
}

// 右上方的用户状态
const value = ref('Option1')
// 右上方的用户状态
const options = [
  {
    value: 'Option1',
    label: '所有',
  },
  {
    value: 'Option2',
    label: '常用',
  },
  {
    value: 'Option3',
    label: '禁用',
  }
]

</script>

<style scoped>
@import url("../../../public/imgsY/icon/iconfont.css");
    /*全局*/
    *{
      padding: 0px;
      margin: 0px;
    }
    /*页面最大盒子*/
    .system-all{
      height: 100%;
    }
    /*头部最大盒子*/
    .search{
      border: 1px solid silver;
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 60px;
    }
    .el-row{
      padding: 5px 0px;
    }

    /deep/ .el-tabs__header {
      margin-bottom: 0px;
    }
    /*头部图片最大的盒子*/
    .icons{
      width: 50px;
      height: 50px;
      background: dodgerblue;
      text-align: center;
      line-height: 50px;
      /*圆角*/
      border-radius: 40px;
      margin-left: 20px;
    }
    /*权限图片*/
    .icon-quanxian {
      color: white;
      font-size: 24px;
      line-height: 50px;
    }
    /*头部标题*/
    .icone{
      padding-left: 15px;
      line-height: 50px;
    }
    /*菜单页面上方最大盒子*/
    .top-all{
      height: 60px;
      border: 1px solid silver;
    }
    .top-one{
      display: flex;
      height: 60px;
    }
    /*菜单名称上面的文字*/
    .li-all{
      font-size: 14px;
      width: 265px;
      line-height: 60px;
      padding-left: 15px;
    }
    /*右上方input盒子*/
    .input-all{
      height: 30px;
      border-radius: 4px;
      width: 180px;
      font-size: 14px;
      border: 1px solid silver;
    }
    /*菜单状态上面的文字*/
    .li-all-one{
      font-size: 14px;
      width: 265px;
      height: 60px;
      padding-left: 15px;
      line-height: 60px;
    }

    /*右上方选择框*/
    .m-2{
      width: 180px;
      height: 30px;
      margin-bottom: 5px;
      font-size: 14px;
    }
    /*上方盒子里面的搜索、重置按钮*/
    .button-all{
      height: 60px;
      line-height: 60px;
    }
    /*页面下方最大盒子*/
    .bottom-all{
      border: 1px solid silver;
      height: 540px;
    }
    /*右下方按钮最大盒子*/
    .button-all{
      padding-left: 17px;
      border-bottom:1px solid silver ;
    }
    /*右下方按钮大盒子*/
    .iconfont-all{
      padding-top: 10px;
    }
    /*按钮小盒子*/
    .iconfont-one1{
      padding: 10px;
      background-color: #1C84C6;
    }
    /*表格里面的显示按钮*/
    .button-one2{
      background-color: #1AB394;
      border-radius: 20px;
      padding: 15px;

    }
    /*按钮小盒子*/
    .iconfont-one2{
      padding: 10px;
      background-color: #1AB394;
    }
    /*按钮小盒子*/
    .iconfont-one3{
      padding: 10px;
      background-color: #23C6C8;
    }
    /*表格里面的---目录按钮*/
    .button-one{
      padding: 15px;
    }

    /*表格里面的---菜单按钮*/
    .button-one1{
      background-color: #1AB394;
      padding: 15px;
    }
    /*大表格的按钮*/
    .table-buttom{
      padding: 10px;
    }


</style>